import {useState} from "react";
import {history} from "umi";
import {Button, CalendarPicker, Card, Form, Input, Picker, Selector} from "antd-mobile";
import {DeleteOutline} from "antd-mobile-icons";

import DatePicker from "@/components/DatePicker";
import dayjs from "dayjs";


const transportationColumns = [
    [
        { label: '飞机', value: 1 },
        { label: '火车', value: 2 },
        { label: '汽车', value: 3 },
        { label: '轮船', value: 4 },
        { label: '其他', value: 5 },
    ]
]

// 是否往返  0_否 1_是
const travelRoundColumns = [
    [
        { label: '单程', value: 0 },
        { label: '往返', value: 1 }
    ]
]

const TripItem = (props) => {
    const {id, showDelete, onDeleteTrip} = props;

    const [trip, setTrip] = useState({
        startDate: "",
        endDate: "",
        departure: "",
        destination: "",
        transportation: 2,
        travelRound: 0
    })

    const [transportationPickerShow, setTransportationPickerShow ] = useState(false);
    const [startDateVisible, setStartDateVisible] = useState(false);
    const [endDateVisible, setEndDateVisible] = useState(false);

    const setTransportation = (value) => {
        // const updatedTrip = Object.assign({}, trip, {transportation: value});
        setTrip({
            ...trip,
            transportation: value
        });
    }



    const [dateVisable, setDateVisable] = useState(false);
    const [startDate, setStartDate] = useState();
    const [endDate, setEndDate] = useState();

    const handleStartDatePicker = (newData) => {
        setDateVisable(newData)
    };


    const handleConfirm = (val) => {
        setStartDate(val);
    }

    return (
        <Card
            title={
                <div style={{fontWeight: 'normal', fontSize: 12}}>
                    行程{id + 1}
                </div>
            }
            extra={showDelete ? (<Button size="small" fill="none" onClick={() => {
                onDeleteTrip(id)
            }}>
                <DeleteOutline color='var(--adm-color-danger)'/></Button>) : (<></>)}
            style={{borderRadius: '16px'}}
        >
            <Form requiredMarkStyle='asterisk' mode="default" >
                <Form.Item name='transportation' label='交通工具' rules={[{required: true}]} arrow={false} onClick={() => {setTransportationPickerShow(true)}}>
                    <Input placeholder='请选择交通工具' value="" readOnly/>
                </Form.Item>
                <Picker
                    columns={transportationColumns}
                    visible={transportationPickerShow}
                    onClose={() => {setTransportationPickerShow(false)}}
                    onConfirm={(value) => {
                        console.log(typeof  value)
                        console.log(JSON.stringify(value))
                        if (typeof value === "object" && value.length > 0) {
                            setTransportation(value[0]);
                        }

                        setTransportationPickerShow(false);
                    }}
                />


                <Form.Item name='startDate' value={trip.startDate} label='开始日期' rules={[{required: true}]}  arrow={false} onClick={()=>{
                    setStartDateVisible(true)
                }}>
                    <Input type="text" placeholder='请选择开始日期'  defaultValue={trip.startDate} value={trip.startDate} readOnly/>
                </Form.Item>
                <CalendarPicker
                    visible={startDateVisible}
                    selectionMode='single'
                    onClose={() => {setStartDateVisible(false)}}
                    onConfirm={(val)=>{

                    }}
                    onChange={(val)=>{
                        if (null != val) {
                            setStartDate(dayjs(val).format("YYYY-MM-DD"));
                        }
                    }}
                />

                <Form.Item name='endDate' value={endDate} label='结束日期' rules={[{required: true}]}  arrow={false} onClick={()=>{setDateVisable(true)}}>
                    <Input type="text" placeholder='请选择结束日期'   defaultValue={endDate} readOnly/>
                </Form.Item>
                <CalendarPicker
                    visible={dateVisable}
                    selectionMode='single'
                    onClose={() => {setDateVisable(false)}}
                    onMaskClick={() => {setDateVisable(true)}}
                    onConfirm={(val)=>{
                        if (null != val) {
                            setStartDate(dayjs(val).format("YYYY-MM-DD"));
                        }
                    }}
                    onChange={()=>{}}
                />

                <Form.Item name='departure' value={startDate} label='出发城市' rules={[{required: true}]}  arrow={false} onClick={()=>{
                    history.push("/index/city");
                }}>
                    <Input type="text" placeholder="请选择出发地"  defaultValue={startDate} />
                </Form.Item>

                <Form.Item name='destination' value={startDate} label='目的城市' rules={[{required: true}]}  arrow={false} onClick={()=>{
                    history.push("/index/city");
                }}>
                    <Input type="text" placeholder="请选择目的"  defaultValue={startDate} />
                </Form.Item>
                <Form.Item name='travelRound' label='单程/往返' rules={[{required: true}]} arrow={false} onClick={async () => {
                    const value = await Picker.prompt({
                        columns: travelRoundColumns,
                    })
                }}>
                    <Input placeholder='请选择' value="" readOnly/>
                </Form.Item>
            </Form>
        </Card>
    );
}

export default TripItem;